<template>
<div class="formedit-box viewbox">
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane :label="data.name" :name="'' + key" v-for="(data, key) in dataSheets" :key="key">
        <span class="font-gray2 f12">当前选择 (<span class="font-green f12 fb">{{ checkIndexs[key].length }}</span>) 个
          导入成功 <span class="font-green fb"> {{ sendResult[key][0] }} </span> 个
          导入失败 <span class="font-red fb"> {{ sendResult[key][1] }} </span> 个
        </span>
      </h1>
      <div class="dis10"></div>
      <table class="table table-import border">
        <colgroup>
          <col width="30px" />
          <col width="130px" />
          <col width="180px" />
          <col width="180px" />
          <col  />
          <col width="110px" />
          <col width="90px" />
          <col width="90px" />
          <col width="150px" />
        </colgroup>
        <tr>
          <th><input type="checkbox" v-model="checkeds[key]" @click="checkAll(key)"/></th>
          <th v-for="(field, key2) in data.fields" v-if="key2 < SPLIT[0]">{{ field }}</th>
          <th> ... </th>
          <th v-for="(field, key2) in data.fields" v-if="key2 > data.cols[1] - SPLIT[1] - 1">{{ field }}</th>
        </tr>
        <template v-for="(item, key1) in data.data" v-if="item">
          <tr  :class="item[0] ? (checkIndexs[key].includes(key1) ? 'blue' : '') : 'gray'">
          <th><input v-if="item[0] && item[1]" type="checkbox" v-model="checkIndexs[key]" :value="key1" /></th>
          <td v-for="(field, key2) in data.fields" v-if="key2 < SPLIT[0]">
            <span v-if="item[key2]" class="f12">{{ item[key2] }}</span>
            <span v-else> - </span>
          </td>
          <td> <span class="font-gray2 f12">更多... &nbsp;</span>
            <el-tooltip class="item" effect="dark" content="点击查看详情" placement="top-start">
              <el-button icon="el-icon-view" @click="viewSalaryDetail(key, key1)" type="default" size="mini" circle></el-button>
            </el-tooltip>

            <span v-if="item.sendstatus && item.sendstatus > 0">
              <span class="font-green f12" v-if="item.sendstatus == 1">导入成功</span>
              <span class="font-red f12" v-else>导入失败</span>
            </span>
          </td>
          <td v-for="(field, key2) in data.fields" v-if="key2 > data.cols[1] - SPLIT[1] - 1">
            <span v-if="item[key2]" :class="(key2 == data.cols[1] - 1) ? 'f12 font-blue' : 'f12 font-org'">{{ item[key2] }}</span>
            <span v-else> - </span>
          </td>
          </tr>
        </template>
      </table>           
    </el-tab-pane>
  </el-tabs>

  <div class="importViewbox" v-if="viewDetailStatus"  v-clickoutside="handleClickOutSide">
    <table class="table table-import border">
    <col width="130px" />
    <col  />
    <tr v-for="(v, k) in viewData" :key="k">
      <th>{{ v.name }}</th>
      <td :class="k == viewData.length -1 ? 'font-blue' : (k > 3 ? 'font-org' : 'font-black') ">{{ v.value }}</td>
    </tr>
    </table>
  </div>
</div>
</template>
<script>
  import clickoutside from '@lib/clickoutside'
  export default {
    props: ['api', 'dataSheets'],
    data () {
      return {        
        SPLIT: [3, 4],
        activeName: '0',
        checkeds: [false],
        checkIndexs: [[], [], [], [], [], []],
        sendResult: [[0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0], [0, 0]],
        viewDetailStatus: false,
        viewData: []
      }
    },
    directives: {
      clickoutside
    },
    created () {
    },
    methods: {
      handleClickOutSide () {
        if (this.viewDetailStatus === true) {
          this.viewDetailStatus = false
        }
      },
      sendRow (key) {
        let that = this
        if (that.checkIndexs[key].length < 1) {
          that.$toast('请选要导入的对象!', 'error')
          return false
        }
        that.sendResult[key] = [0, 0]
        let send = function (start) {
          let ckey = that.checkIndexs[key][start]
          that.$set(that.dataSheets[key].data[ckey], 'sendstatus', 0)
          that.parseViewData(that.dataSheets[key].fields, that.dataSheets[key].data[ckey])
          that.status = true
          that.$api.post(that.api, {name: that.dataSheets[key].name, data: that.viewData}).then((res) => {
            if (res.status === 1) {
              that.$set(that.dataSheets[key].data[ckey], 'sendstatus', 1)
              that.sendResult[key][0] = that.sendResult[key][0] + 1
            } else {
              that.$set(that.dataSheets[key].data[ckey], 'sendstatus', 2)
              that.sendResult[key][1] = that.sendResult[key][1] + 1
            }
            that.status = false
            if (start < that.checkIndexs[key].length - 1) {
              setTimeout( function () {
                send(start + 1)
              }, 1000)
            } else {
              if (that.sendResult[key][0] > 0) {
                that.$toast('成功导入 ' + that.sendResult[key][0] + '个' + (that.sendResult[key][1] > 0 ? ('失败' + that.sendResult[key][1] + '个') : ''))
              } else {
                that.$toast('导入失败 ' + that.sendResult[key][1] + '个', 'error')
              }
            }
          })
        }
        send(0)
      },
      checkAll (index) {
        let that = this
        that.checkeds[index] = !that.checkeds[index]
        that.$set(that.checkIndexs, index, [])
        if (that.checkeds[index]) {
          let tmp = []
          for (let i in that.dataSheets[index].data) {
            if (that.dataSheets[index].data[i][0] && that.dataSheets[index].data[i][1]) {
              tmp.push(parseInt(i))
            }
          }
          that.$set(that.checkIndexs, index, tmp)
        }
      },
      viewSalaryDetail (sheetindex, dataindex) {
        this.viewDetailStatus = true
        this.parseViewData(this.dataSheets[sheetindex].fields, this.dataSheets[sheetindex].data[dataindex])
      },
      parseViewData (fields, data) {
        this.viewData = []
        for (let i in fields) {
          this.viewData.push({
            name: fields[i],
            value: data[i] || ' - '
          })
        }
      }
    }
  }
</script>
<style scoped lang="scss">
 table.view tr th, table.view tr td {padding: 12px 12px; font-weight: 400;}
 .table-import tr th,.table-import tr td {padding: 11px 12px;}
.importViewbox {
  position:absolute;
  top: 70px;
  left: 50%;
  width:900px;margin-left:-450px;
  padding: 20px 30px;
  border:solid 1px #ccc;
  box-shadow: 5px 0px 4px 0 #DAE0E6;
  background:#fff;
}
.importViewbox  table.table {min-width: 600px;}
</style>